<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<!-- 按钮绑定事件 -->
		<button id="btn">随机信息</button>
		<div id="container"></div>
		
		<!-- axios基于promise的HTTP -->
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
		
		<script>
			// axios现在主流的ajax请求库，都是promise（ES6）实现
			// 1、先找到id=btn的元素
			let btnEle =document.getElementById('btn');
			let containerEle =document.getElementById('container');
			

			// 2、给其绑定单机事件
			btnEle.addEventListener("click", async function (){
				// 给loading加载提示
				// imgWarpEle.innerText="数据玩命加载中..."
				// 3、发生ajax请求获取接口数据
				let { data } = await axios.get(
				"https://randomuser.me/api/?results=10"
				);
				// 4、将数据组装成img标签渲染到页面中
				console.log(data)
				let containerStr = "";
				data.results.forEach((div) =>{
					containerStr +=`<div >`
				});
				
				// 5、讲组装好的img标签设置到页面中显示
				containerEle.innerHTML=containerStr;
			});
		</script>
	</body>
</html>